<template>
    <div class="my-title-input-box">
        <div class="title-item">{{ `${label}:`}}</div>
        <div class="input-item">
            <slot name="input-item"></slot>
        </div>

    </div>
</template>

<script>
export default {
    name: "MyTitleInput",
    props:{
        label:{
            type:String,
            default:''
        }
    }
}
</script>

<style lang="less" scoped>
//phone端
@media only screen and (max-width: 576px){
    .my-title-input-box{
        @width:75vw;
        @height:10vw;
        width:@width;
        height:@height;
        display:flex;
        justify-content: space-between;
        align-items: center;
        .title-item{
            height:@height;
            line-height:@height;
            flex-basis: calc(@width / 7 * 2);
        }
        .input-item{
            height:@height;
            flex-basis: calc(@width / 7 * 5);
        }
    }
}

@media only screen and (min-width: 576px){
    .my-title-input-box{
        @width:260px;
        @height:40px;
        width:@width;
        height:@height;
        display:flex;
        justify-content: space-between;
        align-items: center;
        .title-item{
            height:@height;
            line-height:@height;
            flex-basis: calc(@width / 4);
        }
        .input-item{
            height:@height;
            flex-basis: calc(@width / 4 * 3);
        }

    }
}


</style>